<template>
	<view class="page">
		<view class="xb-info">
			<view>
				<text>姓名</text>
				<input type="text" v-model="infor.visitorName" placeholder="请输入姓名" placeholder-class="inputClass" />
			</view>
			<view>
				<text>性别</text>
				<input type="text" v-model="infor.sex" placeholder="请输入性别" placeholder-class="inputClass" />
			</view>
			<!-- 	<view>
				<text>年龄</text>
				<input type="text" v-model="infor.repairFee" placeholder="请输入年龄" placeholder-class="inputClass" />
			</view> -->
			<!--<view>-->
			<!--	<text>身份证号码</text>-->
			<!--	<input type="text" v-model="infor.idCard" placeholder="请输入身份证号码" placeholder-class="inputClass" />-->
			<!--</view>-->
			<view>
				<text>联系电话</text>
				<input type="number" v-model="infor.visitorPhone" placeholder="请输入联系电话"
					placeholder-class="inputClass" />
			</view>
	<!-- 		<view>
				<text>户籍</text>
				<input type="text" v-model="infor.censusRegister" placeholder="请输入户籍" placeholder-class="inputClass" />
			</view> -->
		</view>
		<view class="xb-info">
			<view>
				<text>是否接触过重点疫区返/抵渝人员</text>
				<radio-group @change="touchChange">
					<label>
						<radio value="1" :checked="infor.touch == 1" />
						<span>是</span>
					</label>

					<label>
						<radio value="0" :checked="infor.touch == 0" />
						<span>否</span>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="xb-info">
			<view>
				<text>近期身体无发烧、干咳人员</text>
				<radio-group @change="feverChange">
					<label>
						<radio value="1" :checked="infor.fever == 1" />
						<span>是</span>
					</label>

					<label>
						<radio value="0" :checked="infor.fever == 0" />
						<span>否</span>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="xb-info">
			<view>
				<text>是否接种新冠疫苗</text>
				<radio-group @change="vaccinationChange">
					<label>
						<radio value="1" :checked="infor.vaccination == 1" />
						<span>是</span>
					</label>

					<label>
						<radio value="0" :checked="infor.vaccination == 0" />
						<span>否</span>
					</label>
				</radio-group>
			</view>
		</view>

		<div class="xb-info">
			<view>
				<text>体温℃</text>
				<input type="number" v-model="infor.temperature" placeholder="请输入体温℃" placeholder-class="inputClass" />
			</view>
		</div>

		<div class="xb-info">
			<view>
				<text>到访人数</text>
				<input type="number" v-model="infor.visitorNumber" placeholder="请输入到访人数"
					placeholder-class="inputClass" />
			</view>
		</div>

		<div class="xb-info">
			<view>
				<text>乘坐交通工具</text>
				<text @click="showVehiclePicker=true">
					{{infor.vehicle||'请选择交通工具'}}
					<u-icon name="arrow-right" color="#999" size="22"></u-icon>
				</text>
			</view>
		</div>

		<div class="xb-info">
			<view class="flex-col" style="flex-direction: column;justify-content: flex-start;">
				<text style="text-align: left;justify-content: flex-start;width: 100%;">来访事由</text>
				<textarea auto-height maxlength="200" v-model="infor.visitPurpose" placeholder="请输入最多200个字符…"
					placeholder-class="inputClass"></textarea>
			</view>
		</div>

		<div class="xb-info">
			<view class="flex-col" style="flex-direction: column;justify-content: flex-start;">
				<text style="text-align: left;justify-content: flex-start;width: 100%;">备注</text>
				<textarea auto-height maxlength="200" v-model="infor.remark" placeholder="请输入最多200个字符…"
					placeholder-class="inputClass"></textarea>
			</view>
		</div>

		<view class="xb-bottom-btn" @click="btnClickFn">
			提交
		</view>
		<postSuccess v-if="showSuccess"></postSuccess>
		<u-picker mode="selector" v-model="showVehiclePicker" :range="vehicleOptions" range-key="dictLabel"
			@confirm="vehicleConfirm" :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infor: {
					censusRegister: '', //	户籍		false
					fever: '0', //	近期身体无发烧、干咳人员		false
					idCard: '', //	身份证号码		false
					remark: '', //			false
					sex: '', //性别		false
					temperature: '', //	体温℃		false
					touch: '0', //	是否接触过重点疫区返/抵渝人员		false
					vaccination: '0', //是否接种新冠疫苗		false
					vehicle: '', //	乘坐交通工具		false
					visitPurpose: '', //	访问目的		false
					visitorName: '', //	访客名称		false
					visitorNumber: '', //	到访人数		false
					visitorPhone: '' //	访客联系电话
				},
				showSuccess: false,
				vehicleOptions: [],
				showVehiclePicker: false
			};
		},
		onLoad(opts) {
			
			if(opts.q){
				let url = decodeURIComponent(opts.q);
				this.infor.parkNum=getQueryString(url,'parkNum')
				console.log("this.infor",this.infor);
				function getQueryString(url, name) {
					var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
					var r = url.substr(1).match(reg);
					if (r != null) {
						return r[2];
					}
					return null;
				}
			}
			
			// let url=new URL("http://wx.xibushigu.com/visitor?parkNum=B&a=1&b=2")
			this.apis.commonApi.getDict('sys_comom_vehicle').then(res => {
				this.vehicleOptions = res.data
			})
		},
		methods: {
			touchChange(op) {
				this.infor.touch = op.detail.value
			},
			feverChange(op) {
				this.infor.fever = op.detail.value
			},
			vaccinationChange(op) {
				this.infor.vaccination = op.detail.value
			},
			btnClickFn() {
				let rules = [{
						name: 'censusRegister',
						type: 'required',
						errmsg: '请输入户籍'
					},
					{
						name: 'fever',
						type: 'required',
						errmsg: '请选择是否发烧'
					},
					//{name: 'idCard',required:true, type: 'idCard', errmsg: '请输入正确身份证号码'},
					{
						name: 'sex',
						required: true,
						type: 'sex',
						errmsg: '请输入男或女'
					},
					{
						name: 'temperature',
						type: 'required',
						errmsg: '请输入体温'
					},
					{
						name: 'touch',
						type: 'required',
						errmsg: '请选择是否接触过重点疫区'
					},
					{
						name: 'vaccination',
						type: 'required',
						errmsg: '请选择是否接种新冠疫苗'
					},
					{
						name: 'vehicle',
						type: 'required',
						errmsg: '请选择乘坐交通工具'
					},
					{
						name: 'visitPurpose',
						type: 'required',
						errmsg: '请输入访问目的'
					},
					{
						name: 'visitorName',
						type: 'required',
						errmsg: '请输入访客名称'
					},
					{
						name: 'visitorNumber',
						type: 'required',
						errmsg: '请输入到访人数'
					},
					{
						name: 'visitorPhone',
						required: true,
						type: 'phone',
						errmsg: '请输入正确联系电话'
					},

				]
				let valLoginRes = this.$validate.validate(this.infor, rules)

				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				} else {
					this.apis.energyApi.addMjVisitor(this.infor).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.showSuccess = true
						}
					})
				}

			},
			vehicleConfirm(op) {
				this.infor.vehicle = this.vehicleOptions[op[0]].dictLabel
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 112rpx;
	}
</style>
